{% extends "myapp/base.html" %}
{% load static %}
<head>
{% block title %} The Current time {% endblock %}
<link rel="stylesheet" type="text/css" href={% static 'myapp/style.css'%} />
</head>
<body>

{% block bootstrap3_content%}

<div class="container-fluid">
    <!-- Left Column -->
    <div class="col-sm-3">

    <!-- List-Group Panel -->
    <div class="panel panel-default">
    <div class="panel-heading">
    <h1 class="panel-title"><span class="glyphicon glyphicon-fire"></span> The Principles of Programmer </h1>
    </div>
    <div class="list-group">
    <a href="#" class="list-group-item">Embrace Change </a>
    <a href="#" class="list-group-item">KISS: Keep it simple, stupid!</a>
    <a href="#" class="list-group-item">Hide Implementation Details</a>
    <a href="#" class="list-group-item">LoD: Law of Demeter</a>
    <a href="#" class="list-group-item">DRY: Don't Repeat Youself</a>
    </div>
    </div>

    <!-- Text Panel -->
    <div class="panel panel-default">
    <div class="panel-heading">
    <h1 class="panel-title"><span class="glyphicon glyphicon-pencil"></span> Don’t repeat yourself</h1>
    </div>

    <div class="panel-body">
    <p>DRY is probably the single most fundamental tenet in programming is to avoid repetition. Many programming constructs exist solely for that purpose (e.g. loops, functions, classes, and more). As soon as you start repeating yourself (e.g. a long expression, a series of statements, same concept) create a new abstraction.</p>
    <p><button class="btn btn-default">Engage</button></p>
    </div>
    </div>

    <!-- Text Panel -->
    <div class="panel panel-default">
    <div class="panel-heading">
    <h3 class="panel-title">
    <span class="glyphicon glyphicon-bullhorn"></span>
    Active Predomination
    </h3>
    </div>
    <div class="panel-body">
    <p>Proactively envisioned multimedia based expertise and cross-media growth strategies.</p>
    <div class="btn-group" role="group">
    <button type="button" class="btn btn-default">Resource</button>
    <button type="button" class="btn btn-default">Envision</button>
    <button type="button" class="btn btn-default">Niche</button>
    </div>
    </div>
    </div>

    </div><!--/Left Column-->


    <!-- Center Column -->
    <div class="col-sm-6">
    <!-- Articles -->
    {% for article in latest_article_list %}
    <div class="row">
    <article class="col-xs-12">
    <h2><a id="article_title", href="/focus/{{ article.id }}">{{ article.title }}</a></h2>
    <p>{{ article.content|truncatechars_html:80 | safe }}</p>
    <!-- 	<p><button class="btn btn-default">Read More</button></p>  -->
    <p class="pull-right"><span class="label label-default">{{ article.column }}</span> <span class="label label-default">tag</span> <span class="label label-default">{{ article.author }}</span></p>
    <ul class="list-inline">
    <li><a href="#">{{ article.pub_date | date:"j M" }}</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-comment"></span> {{ article.comment_num }} Comments</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star-empty"></span>{{ article.keep_num }} Favorites</a></li>
    </ul>
    </article>
    </div>
    <hr>
    {% endfor %}
    <div class="row">
    <article class="col-xs-12">
    <h2>Premier Niche Markets</h2>
    <p>Phosfluorescently engage worldwide methodologies with web-enabled technology. Interactively coordinate proactive e-commerce via process-centric "outside the box" thinking. Completely pursue scalable customer service through sustainable potentialities.</p>
    <p><button class="btn btn-default">Read More</button></p>
    <p class="pull-right"><span class="label label-default">keyword</span> <span class="label label-default">tag</span> <span class="label label-default">post</span></p>
    <ul class="list-inline">
    <li><a href="#">Today</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-comment"></span> 2 Comments</a></li>
    <li><a href="#"><span class="glyphicon glyphicon-star-empty"></span> 8 favorites</a></li>
    </ul>
    </article>
    </div>
    <hr>
    </div><!--/Center Column-->


      <!-- Right Column -->
      <div class="col-sm-3">
    {% if request.user.is_authenticated %}
    <!-- Form -->
    <div class="panel panel-default">
    <div class="panel-heading">
    <h3 class="panel-title">
    <span class="glyphicon glyphicon-user"></span>
    Logged In
    </h3>
    </div>
    <div class="panel-body">
    <div class="form-group">hi:{{ user }} <a href="/focus/logout/"><input class="btn btn-default" type="submit" value="Logout" /></a></div>
    </div>
    </div>
    {% else %}
    <div class="panel panel-default">
    <div class="panel-heading">
    <h3 class="panel-title">
    <span class="glyphicon glyphicon-log-in"></span>
    Log In
    </h3>
    </div>
    <div class="panel-body">
    <form action="/focus/login/" method="post">
    {% csrf_token %}
    {{ loginform.non_field_errors }}
    <div class="form-group">
    {{ loginform.uid }}
    <!--	<input type="text" class="form-control" id="uid" name="uid" placeholder="Username">  -->
    </div>
    <div class="form-group">
    {{ loginform.pwd }}
    <!--	<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password">  -->
    </div>
    <button type="submit" class="btn btn-default">Log In</button>
    </form>
    </div>
    </div>
 			{% endif %}
    <!-- Progress Bars -->
    <div class="panel panel-default">
    <div class="panel-heading">
    <h3 class="panel-title">
    <span class="glyphicon glyphicon-tasks"></span>
    Completeness
    </h3>
    </div>
    <div class="panel-body">
    <div class="progress">
    <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="100"
    aria-valuemin="0" aria-valuemax="100" style="width:100%">
    100% Django
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="80"
    aria-valuemin="0" aria-valuemax="100" style="width:80%">
    80% Tornado
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="45"
    aria-valuemin="0" aria-valuemax="100" style="width:45%">
    45% Crawler
    </div>
    </div>
    <div class="progress">
    <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="35"
    aria-valuemin="0" aria-valuemax="100" style="width:35%">
    35% Basics
    </div>
    </div>
    </div>
    </div>

    <!-- advertisements -->
 			<h3><span class="glyphicon glyphicon-link"></span> Advertisements</h3>
    <div id="side-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
    <li data-target="#side-carousel" data-slide-to="0" class="active"></li>
    <li data-target="#side-carousel" data-slide-to="1"></li>
    <li data-target="#side-carousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
    <div class="item active">
    <a href="#">
    <img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%201" alt="">
    </a>
    <div class="carousel-caption">
    <h3>I am a genius</h3>
    <p>Objectively innovate empowered manufactured products whereas parallel platforms.</p>
    </div>
    </div>
    <div class="item">
    <a href="#">
    <img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%202" alt="">
    </a>
    <div class="carousel-caption">
    <h3>You are an idiot</h3>
    <p>Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
    </div>
    </div>
    <div class="item">
    <a href="#">
    <img class="img-responsive" src="holder.js/400x300?bg=FF8C00&text=Image%203" alt="">
    </a>
    <div class="carousel-caption">
    <h3>Enough! </h3>
    <p>Everyone shut up and listen to me.</p>
    </div>
    </div>
    </div>
    <a class="left carousel-control" href="#side-carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#side-carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
      </div>

      </div><!--/Right Column -->

    </div><!--/container-fluid-->
<div class="panel-body">
    <form action="/focus/login/" method="post">
        {% csrf_token %}
        {{ loginform.non_field_errors }}
        <div class="form-group">
            {{ loginform.uid }}
        <!--	<input type="text" class="form-control" id="uid" name="uid" placeholder="Username">  -->
        </div>
        <div class="form-group">
            {{ loginform.pwd }}
        <!--	<input type="password" class="form-control" id="pwd" name="pwd" placeholder="Password">  -->
        </div>
        <button type="submit" class="btn btn-default">Log In</button>
    </form>
</div>
{% if latest_question_list %}
<ul>
    {% for question in latest_question_list %}
        <li><a href="{% url 'myapp:detail' question.id %}">
            {{ question.question_text }}</a></li>
    {% endfor %}
</ul>
{% else %}
<p>No polls are available.</p>
{% endif %}
{% endblock %}
</body>
